import { Form, Input, Select, message, Card, Tree, Upload } from 'myselfantd';
import React, { useMemo, useCallback } from 'react';
import styles from './index.module.scss';
import { terminalAdd, terminalUpdate, delMachine } from '../api';

interface AddFormProps {
  mapPoint?: string;
  data?: any;
  onFinish: Function;
  viewmode: any;
}
const App: React.FC<AddFormProps> = (props) => {
  let { data = {}, onFinish: handleFinish, viewmode } = props;
  console.log(data, '---data-----das');
  return (
    <div className={styles.addContent}>
      <Card>
        <Form.Layout
          viewmode={viewmode}
          data={data}
          formItemData={useMemo(
            () => [
              [
                {
                  name: 'type',
                  label: '终端类型',
                  rules: [{ required: true, message: '终端类型必填' }],
                  render: () => (
                    <Select placeholder="请选择" allowClear>
                      <Select.Option value={1}>ncu</Select.Option>
                      <Select.Option value={2}>智能驾驶舱</Select.Option>
                    </Select>
                  ),
                  editRender: () => (
                    <Select placeholder="请选择" allowClear disabled>
                      <Select.Option value={1}>ncu</Select.Option>
                      <Select.Option value={2}>智能驾驶舱</Select.Option>
                    </Select>
                  ),
                },
                {
                  name: 'model',
                  label: '终端型号',
                  rules: [{ required: true, message: '终端型号必填' }],
                  render: () => <Input placeholder="请输入" />,
                  editRender: () => <Input disabled placeholder="请输入" />,
                },
              ],
              [
                {
                  name: 'sn',
                  label: '终端序列号',
                  rules: [{ required: true, message: '终端序列号必填' }],
                  render: () => <Input placeholder="请输入" />,
                  editRender: () => <Input disabled placeholder="请输入" />,
                },
                {
                  name: 'code',
                  label: 'wifi编号',
                  rules: [{ required: true, message: 'wifi编号必填' }],
                  render: () => <Input placeholder="请输入" />,
                  editRender: () => <Input disabled placeholder="请输入" />,
                },
              ],
              [
                {
                  name: 'protocol',
                  label: '协议类型',
                  render: () => (
                    <Select placeholder="请选择" allowClear>
                      <Select.Option value={1}>mqtt</Select.Option>
                    </Select>
                  ),
                },
              ],
              [
                {
                  name: 'simNo',
                  label: 'SIM卡',
                  render: () => <Input placeholder="请输入" />,
                },
                {
                  name: 'belongingSystem',
                  label: '所属系统',
                  render: () => (
                    <Select placeholder="请选择" allowClear>
                      <Select.Option value={0}>设备管理系统</Select.Option>
                      <Select.Option value={1}>一机多控</Select.Option>
                    </Select>
                  ),
                },
              ],
              [
                {
                  name: 'remark',
                  label: '备 注',
                  render: () => <Input.TextArea   showCount maxLength={512}/>,
                },
              ],
            ],
            [],
          )}
          request={useCallback(async (val: any) => {
            if (viewmode === 'add') {
              let res = await terminalAdd(val);
              if (res) {
                message.success('添加成功');
                handleFinish();
              }
            } else {
              val.id = data.id;
              let res = await terminalUpdate(val);
              if (res) {
                message.success('编辑成功');
                handleFinish();
              }
            }
          }, [])}
          onFinish={handleFinish}
        ></Form.Layout>
      </Card>
    </div>
  );
};

export default App;
